import styled from 'styled-components';

import React, { Component, useState, useEffect } from 'react'
import { getNewsList } from "../../../api/news";
import { useNavigate } from 'react-router-dom';

const Container = styled.div`
  & {
    .newsList {
      padding: 0 16px;
      background: #fff;
      .item {
        text-align: left;
        padding: 12px 0;
        border-bottom: 1px solid #cccccc;
      }
    }
  }
`


const News = (prop) => {
  const [dataList, setDataList] = useState([])
  const navigate = useNavigate()
  useEffect( async () => {
    let isMounted = true
    const params = {
      near: 1, // 近一周
      pageIndex: 1,
      pageSize: 10
    }
    
    const { data } = await getNewsList(params);
    if (isMounted && data && data.length > 0) {
      setDataList(data)
    }
    return () => {isMounted = false}
  },[])

  return (
    <Container>
      <div className="newsList">
        <div className="title">{prop.title}</div>
        {dataList.map((e, index) => (
          <div className="item" key={index} onClick={() => navigate('/frameDetail', {state: {datas: e}})}            >
            {e.post_title}
          </div>
        ))}
      </div>
    </Container>
  )
}

export default News